<script lang="ts" setup>
import { ref, reactive, toRefs, watch } from "vue" // vue
import { FormInstance, ElMessage } from "element-plus" // elment
import { Search, Refresh } from "@element-plus/icons-vue" // 按钮图标
import {
  createwebOrderDataApi,
  updatewebOrderDataApi,
  updatewebOrderDataApiZC,
  getwebOrderDataApi,
  getwebSetApi,
  getDetailedApi,
  getwebSetApiTwo
} from "@/api/webSet/order" // 接口
import { usePagination } from "@/hooks/usePagination" // 分页器
import { useUserStore } from "@/store/modules/user" // 用户信息
import { formatDateTime } from "@/utils" // 时间转换
import { shortcuts } from "@/utils/dateSet"
import { useCascaderAreaData } from "@vant/area-data" // 地址
import { checkPhoneNumber, checkID, checkName, isAddressDetailed } from "@/utils/validate" // 身份证校验
// 缓存
defineOptions({
  name: "WebList"
})
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 0)]
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination() // 分页器
const userStore = useUserStore() // 用户信息
const areaoptions = useCascaderAreaData() // 地址
const props = {
  multiple: false,
  checkStrictly: true,
  label: "text",
  value: "text"
} // 地址
// 表单
const data = reactive<any>({
  formData: {
    orderSource: "",
    totalFeeZJ: []
  },
  searchData: {
    id: undefined, // 订单id
    orderId: undefined, // 订单外部ID

    orderWantWant: undefined, // 旺旺号
    orderCardId: undefined, // 身份证号
    orderCardName: undefined, //   办理姓名
    orderPhone: undefined, // 联系电话
    webId: undefined, // 产品名称
    mentorPhone: undefined, // 安装师傅电话
    state: undefined, // 状态
    superName: undefined, // 上级名称
    // iccId: undefined, // 外部触点单号
    createTime: "" // 创建时间
  },
  // 表单验证
  rules: {
    orderId: [{ required: true, trigger: "blur", message: "请输入" }],
    // orderWantWant: [{ required: true, trigger: "blur", message: "请输入" }],
    orderCardId: [{ required: true, validator: checkID, trigger: "blur" }],
    // orderNote: [{ required: true, trigger: "blur", message: "请输入" }],
    orderCardName: [{ required: true, validator: checkName, trigger: "blur" }],
    orderAddress: [{ required: true, validator: isAddressDetailed, trigger: "blur" }],
    orderPhone: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
    webId: [{ required: true, trigger: "change", message: "请输入" }],
    isMentor: [{ required: true, trigger: "blur", message: "请输入" }],
    money: [{ required: true, trigger: "blur", message: "请输入" }]
  }
})

const { searchData, formData, rules } = toRefs(data)
// #region 查
const tableData = ref<any>([])
function tablelist() {
  getwebOrderDataApi({
    ...searchData.value,
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    start: new Date(searchData.value.createTime[0]).getTime() || "", // 时间
    end: new Date(searchData.value.createTime[1]).getTime() || "" // 时间
  })
    .then((res: any) => {
      tableData.value = res.data.list
      paginationData.total = res.data.total
    })
    .catch(() => {
      tableData.value = []
    })
}
tablelist()

// #endregion

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
// 搜索
function handleSearch() {
  tablelist()
}
// 重置
function resetSearch() {
  searchFormRef.value?.resetFields()
  searchData.value.state = ""
  handleSearch()
}
// #endregion

// #region 添加和修改框
const dialogVisible = ref(false)
const dialogVisibleXQ = ref(false) // 查看详情
const formRef = ref<FormInstance | null>(null)
const ids = ref(undefined) // 判断修改还是增加
const ck = ref("") // 判断是否查看
// 新增
const XZorder = () => {
  dialogVisible.value = true
}
// 修改
// const handleUpdate = (row: any) => {
//   ids.value = row.id
//   ck.value = "修改"
//   dialogVisible.value = true
//   // formData.value = JSON.parse(JSON.stringify(row)) // 赋值需要深拷贝
//   getDetailedApi({
//     id: ids.value
//   }).then((res: any) => {
//     formData.value = res.data
//     formData.value.var2 = formData.value.var2.split(",")
//     // #region 图片相关
//     res.data.photo = res.data.photo
//       ?.split(",")
//       .map((item: any) => {
//         return item.split("/image/")[1]
//       })
//       .join()
//     if (res.data.photo) {
//       console.log(res.data.photo, 99)
//       // 如果最后一个是逗号删除
//       fileList1.value = res.data.photo
//         .replace(/,$/, "")
//         ?.split(",")
//         .map((item: any) => {
//           return {
//             url: `https://yunyoutongxin.com/image/${item}`
//             // url: item
//             // url: `http://192.168.1.8:8080/image/${item}`
//           }
//         })
//     }

//     // #endregion 截止图片相关

//     // 根据区域拿套餐
//     getwebSetApi({ area: formData.value.var2.join(",") }).then((res: any) => {
//       webIdList.value = res.data.list
//     })
//     // 获取套餐数组金额
//     getwebSetFeeApi({ id: row.webId }).then((res: any) => {
//       console.log(res, "获取套餐数组金额")
//       webIdListZJ.value = res.data
//     })
//   })
// }
// 再次提交
// const handleUpdateZC = (row: any) => {
//   ids.value = row.id
//   ck.value = "再次"
//   dialogVisible.value = true
//   getDetailedApi({
//     id: ids.value
//   }).then((res: any) => {
//     formData.value = res.data
//     formData.value.var2 = formData.value.var2.split(",")

//     // #region 图片相关
//     res.data.photo = res.data.photo
//       ?.split(",")
//       .map((item: any) => {
//         return item.split("/image/")[1]
//       })
//       .join()
//     if (res.data.photo) {
//       console.log(res.data.photo, 99)
//       // 如果最后一个是逗号删除
//       fileList1.value = res.data.photo
//         .replace(/,$/, "")
//         ?.split(",")
//         .map((item: any) => {
//           return {
//             url: `https://yunyoutongxin.com/image/${item}`
//             // url: item
//             // url: `http://192.168.1.8:8080/image/${item}`
//           }
//         })
//     }

//     // #endregion 截止图片相关

//     // 根据区域拿套餐
//     getwebSetApi({ area: formData.value.var2.join(",") }).then((res: any) => {
//       webIdList.value = res.data.list
//     })
//   })
//   // 获取套餐数组金额
//   getwebSetFeeApi({ id: row.webId }).then((res: any) => {
//     console.log(res, "获取套餐数组金额")
//     webIdListZJ.value = res.data
//   })
//   // formData.value = JSON.parse(JSON.stringify(row)) // 赋值需要深拷贝
// }
// 查看详情
const handleCK = (row: any) => {
  ck.value = "查看"
  ids.value = row.id
  console.log(row, 888)
  dialogVisibleXQ.value = true // 查看详情弹框
  formData.value = JSON.parse(JSON.stringify(row)) // 赋值需要深拷贝
  formData.value.var2 = formData.value.var2.split(",")
  if (row.jsTime !== null) {
    formData.value.jsTime = formatDateTime(row.jsTime)
  }
}

/**脱敏操作 */
const handleDecrypt = (flag: any) => {
  getDetailedApi({
    id: ids.value
  }).then((res: any) => {
    if (flag === "orderCardName") {
      formData.value.orderCardName = res.data.orderCardName
    }
    if (flag === "orderCardId") {
      formData.value.orderCardId = res.data.orderCardId
    }
    if (flag === "orderAddress") {
      formData.value.orderAddress = res.data.orderAddress
    }
  })
}

// 清空form框
const clearValidate = () => {
  formRef.value?.resetFields()
}

// 清空对话框
const resetForm = () => {
  ids.value = undefined
  ck.value = ""
  clearValidate()
  formData.value = {}
  webIdList.value = []
  // fileList1.value = [] // 图片
  formData.value.totalFeeZJ = []
  webIdListZJ.value = []
}
// 确定按钮
const handleCreate = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (ids.value === undefined) {
        createwebOrderDataApi({ ...formData.value, var2: formData.value.var2.join(",") }).then(() => {
          ElMessage.success("新增成功")
          dialogVisible.value = false
          tablelist()
        })
      } else if (ck.value == "修改") {
        updatewebOrderDataApi({ ...formData.value, var2: formData.value.var2.join(",") }).then(() => {
          ElMessage.success("修改成功")
          dialogVisible.value = false
          tablelist()
        })
      } else if (ck.value == "再次") {
        updatewebOrderDataApiZC({ ...formData.value, var2: formData.value.var2.join(",") }).then(() => {
          ElMessage.success("提交成功")
          dialogVisible.value = false
          tablelist()
        })
      }
    } else {
      return false
    }
  })
}
// #endregion

//  #region 产品名称
const webIdList = ref<any>([])
const webIdListTWo = ref<any>([])
const webIdListZJ = ref<any>([]) // 选择总计
const ChangewebIdList = (i: any) => {
  formData.value.webId = ""
  getwebSetApi({ area: i.join(",") }).then((res: any) => {
    webIdList.value = res.data.list
  })
}
// 遍历套餐获取收取费用

// const ChangewebIdListJE = (i: any) => {
//   //  清空选择总计框和总计
//   formData.value.totalFeeZJ = []
//   formData.value.webIdListZJ = []
//   formData.value.totalFee = 0
//   console.log(i, "套餐id")
//   // 获取套餐数组金额
//   getwebSetFeeApi({ id: i }).then((res: any) => {
//     console.log(res, "获取套餐数组金额")
//     webIdListZJ.value = res.data
//   })
// }

// const xuanzezongji = (e: any) => {
//   // 将数组字符串数字转数字
//   // formData.value.totalFee = e.map(Number)
//   // 去除数组中的横线符号并转为数字
//   formData.value.totalFee = e.map((item: any) => {
//     return Number(item.replace(/[\u4e00-\u9fa5-()A-Za-z]/g, ""))
//   })

//   console.log(formData.value.totalFee)
//   // // 将数组数字相加
//   formData.value.totalFee = formData.value.totalFee.reduce(
//     (accumulator: any, currentValue: any) => accumulator + currentValue,
//     0
//   )
// }
getwebSetApiTwo().then((res: any) => {
  webIdListTWo.value = res.data.list
})
// 遍历套餐id显示名字
const formatterCombo = (row: any, column: any, celValue: any) => {
  webIdList.value.filter((item: any) => {
    if (item.id == row.webId) {
      celValue = item.name
    }
  })
  webIdListTWo.value.filter((item: any) => {
    if (item.id == row.webId) {
      celValue = item.name
    }
  })
  return celValue
}

// #region 下载
// const downLoad = () => {
//   downLoadOrder({
//     ...searchData.value,
//     start: new Date(searchData.value.createTime[0]).getTime() || "", // 时间
//     end: new Date(searchData.value.createTime[1]).getTime() || "" // 时间
//   }).then((res: any) => {
//     const blob = new Blob([res.data], {
//       type: "application/xlsx;charset=utf-8"
//     })
//     const downloadElement = document.createElement("a")
//     const href = window.URL.createObjectURL(blob)
//     downloadElement.href = href
//     downloadElement.download = "宽带订单.xlsx"
//     document.body.appendChild(downloadElement)
//     downloadElement.click()
//     window.URL.revokeObjectURL(href)
//   })
// }
// #endregion

// ****************订单批量修改上传*******************************
// import { genFileId } from "element-plus"
// import { getToken } from "@/utils/cache/cookies"
// const uploadheaders = ref<any>({
//   token: getToken()
// })
// import type { UploadProps } from "element-plus"

// const upload = ref<UploadInstance>()

// const handleExceed: UploadProps["onExceed"] = (files: any) => {
//   upload.value!.clearFiles()
//   const file = files[0] as UploadRawFile
//   file.uid = genFileId()
//   upload.value!.handleStart(file)
// }
// const updateInfo = ref<any>(null)
// const updateSuccInfo = ref<boolean>(false)
// const handleSucc = (res: any) => {
//   if (res.code == 200) {
//     tablelist()
//     updateInfo.value = res
//     updateSuccInfo.value = true

//     // ElMessage.success("成功！")
//   } else {
//     ElMessage.error(res.message)
//   }
// }

// const submitUpload = () => {
//   // loading.value = true
//   upload.value!.submit()
// }
// *********************订单批量修改结束*************************

// // #region 多张图片 上传图片
// const fileList1 = ref<any>([]) /**图片列表 */
// const headersOpts = {
//   token: getToken()
// }
// const handleChageImg1 = (file: any, resfileList: any) => {
//   const size = ref(2)
//   const fileSizeFlag = file.size / 1024 / 1024 < size.value
//   if (!fileSizeFlag) {
//     ElMessage.error(`请上传不大于${size.value}M的图片!`)
//     formData.value.photo = resfileList.filter((item: any) => item.uid !== file.uid) /**不符合规定的图片不在照片墙展示 */
//   } else {
//     formData.value.photo = resfileList
//       .map((item: any) => {
//         return item.response?.data.split("/image/")[1]
//           ? item.response?.data.split("/image/")[1]
//           : item.url.split("/image/")[1]
//       })
//       .join(",")
//   }
// }
// // 多张图片 移除图片
// const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
//   console.log(uploadFiles, 180)
//   formData.value.photo = uploadFiles
//     .map((item: any) => {
//       return item.response?.data.split("/image/")[1]
//         ? item.response?.data.split("/image/")[1]
//         : item.url.split("/image/")[1]
//     })
//     .join(",")
// }
// // 放大查看图片
// const dialogImageUrl = ref("")
// const dialogVisible2 = ref(false)
// const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
//   dialogImageUrl.value = uploadFile.url!
//   dialogVisible2.value = true
// }
// // #endregion

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], tablelist, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card>
      <el-row justify="center" align="middle">
        <el-col>
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="id" label="订单id">
              <el-input v-model.trim="searchData.id" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="orderId" label="订单外部ID">
              <el-input v-model.trim="searchData.orderId" clearable placeholder="请输入" />
            </el-form-item>
            <!-- <el-form-item prop="iccId" label="外部触点单号">
              <el-input v-model.trim="searchData.iccId" clearable placeholder="请输入" />
            </el-form-item> -->
            <el-form-item
              v-if="
                userStore.roles[0] == '超级管理员' ||
                userStore.roles[0] == '渠道部子账户管理员' ||
                userStore.roles[0] == '子账户超级管理员' ||
                userStore.roles[0] == '正羽部客服组' ||
                userStore.roles[0] == '技术研发组'
              "
              prop="superName"
              label="上级名称"
            >
              <el-input v-model.trim="searchData.superName" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="orderWantWant" label="旺旺号">
              <el-input v-model.trim="searchData.orderWantWant" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="orderCardName" label="办理姓名">
              <el-input v-model.trim="searchData.orderCardName" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="orderCardId" label="身份证号码">
              <el-input v-model.trim="searchData.orderCardId" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="orderPhone" label="联系电话">
              <el-input v-model.trim="searchData.orderPhone" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="webId" label="宽带产品名称">
              <el-select v-model="searchData.webId" filterable clearable placeholder="请选择">
                <el-option
                  v-for="item in webIdListTWo"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :class="item.state == '下架' ? 'Xjstate' : ''"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="mentorPhone" label="安装师傅电话">
              <el-input v-model.trim="searchData.mentorPhone" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="state" label="状态">
              <el-select v-model="searchData.state" clearable placeholder="请选择">
                <el-option :key="1" label="未提交" value="未提交" />
                <el-option :key="2" label="处理中" value="处理中" />
                <el-option :key="3" label="安装中" value="安装中" />
                <el-option :key="4" label="已完成" value="已完成" />
                <el-option :key="5" label="安装失败" value="安装失败" />
              </el-select>
            </el-form-item>
            <el-form-item prop="createTime" label="创建时间">
              <el-date-picker
                v-model="searchData.createTime"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
              <el-button @click="XZorder">新增订单</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 20px">
      <div class="toolbar-wrapper">
        <!-- <div>
           <el-button type="primary" :icon="CirclePlus" @click="handleAdd">添加订单</el-button>
           <el-button type="danger" :icon="UploadFilled">批量上传</el-button>
          <el-upload
            ref="upload"
            class="upload-demo"
            action="api/webOrder/batchUpdate"
            :limit="1"
            :headers="uploadheaders"
            :on-exceed="handleExceed"
            :on-success="handleSucc"
            :auto-upload="false"
            style="display: inline-block; vertical-align: top; margin-left: 10px"
            v-if="
              userStore.roles[0] == '超级管理员' ||
              userStore.roles[0] == '渠道部子账户管理员' ||
              userStore.roles[0] == '子账户超级管理员' ||
              userStore.roles[0] == '正羽部客服组' ||
              userStore.roles[0] == '技术研发组'
            "
          >
            <template #trigger>
              <el-button type="danger" :icon="Folder">选择文件</el-button>
            </template>
            <el-button
              style="vertical-align: top"
              class="ml-3"
              type="success"
              :icon="UploadFilled"
              @click="submitUpload"
              v-if="
                userStore.roles[0] == '超级管理员' ||
                userStore.roles[0] == '渠道部子账户管理员' ||
                userStore.roles[0] == '子账户超级管理员' ||
                userStore.roles[0] == '正羽部客服组' ||
                userStore.roles[0] == '技术研发组'
              "
            >
              批量修改
            </el-button>
          </el-upload>

          <el-link
            type="primary"
            :icon="Download"
            style="margin-left: 50px; vertical-align: -webkit-baseline-middle"
            href="api/webOrder/down/downTemplate"
            Download
            v-if="
              userStore.roles[0] == '超级管理员' ||
              userStore.roles[0] == '渠道部子账户管理员' ||
              userStore.roles[0] == '子账户超级管理员' ||
              userStore.roles[0] == '正羽部客服组' ||
              userStore.roles[0] == '技术研发组'
            "
            >下载模版</el-link
          >
        </div> -->
        <!-- <div>
          <el-tooltip content="下载">
            <el-button type="primary" :icon="Download" circle @click="downLoad" />
          </el-tooltip>
        </div> -->
      </div>
      <el-table :data="tableData" border>
        <el-table-column prop="id" label="订单id" align="center" width="70" />
        <el-table-column prop="createTime" label="创建时间" align="center" width="70">
          <template #default="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="stateTime" label="状态更新时间" align="center" width="70">
          <template #default="scope">
            <span v-if="scope.row.stateTime !== null"> {{ formatDateTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="订单外部ID" align="center" width="70" />
        <!-- <el-table-column prop="iccId" label="外部触点单号" align="center" width="70" /> -->
        <el-table-column
          v-if="userStore.roles[0] !== '子账户超级管理员'"
          prop="orderWantWant"
          label="旺旺号"
          align="center"
          width="70"
        />
        <el-table-column prop="orderNote" label="备注" align="center" width="70" />
        <el-table-column prop="webId" label="宽带产品ID" align="center" width="70" />
        <el-table-column prop="webId" label="宽带产品名称" :formatter="formatterCombo" align="center" width="70" />
        <el-table-column prop="orderCardName" label="办理姓名" align="center" width="70" />
        <el-table-column prop="orderCardId" label="身份证号码" align="center" width="70" />
        <el-table-column prop="orderAddress" label="地址" align="center" width="70" />
        <el-table-column prop="orderPhone" label="联系电话" align="center" width="70" />
        <el-table-column prop="money" label="付款金额" align="center" width="70" />
        <el-table-column prop="isMentor" label="需要师傅代收款" align="center" width="70" />
        <el-table-column prop="state" label="状态" align="center" width="85">
          <template #default="scope">
            <el-text v-if="scope.row.state == '未提交'" type="primary">未提交 </el-text>
            <el-text v-if="scope.row.state == '处理中'" type="warning">处理中 </el-text>
            <el-text v-if="scope.row.state == '安装中'" type="warning">安装中 </el-text>
            <el-text v-if="scope.row.state == '已完成'" type="success">已完成 </el-text>
            <el-text v-if="scope.row.state == '安装失败'" type="danger">安装失败 </el-text>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="结果描述" align="center" width="85" />
        <el-table-column prop="updateTime" label="变更时间" align="center" width="85">
          <template #default="scope">
            <el-text v-if="scope.row.updateTime !== null"> {{ formatDateTime(scope.row.updateTime) }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="mentorPhone" label="安装师傅电话" align="center" width="85" />
        <el-table-column prop="mentorNote" label="安装情况备注" align="center" width="85" />
        <!-- <el-table-column
          v-if="
            userStore.roles[0] == '超级管理员' ||
            userStore.roles[0] == '渠道部子账户管理员' ||
            userStore.roles[0] == '子账户超级管理员' ||
            userStore.roles[0] == '正羽部客服组' ||
            userStore.roles[0] == '技术研发组'
          "
          prop="superName"
          label="上级名称"
          align="center"
          width="85"
        /> -->
        <el-table-column fixed="right" label="操作" align="center">
          <template #default="scope">
            <!-- <el-button
              v-if="
                userStore.roles[0] == '超级管理员' ||
                userStore.roles[0] == '渠道部子账户管理员' ||
                userStore.roles[0] == '子账户超级管理员' ||
                userStore.roles[0] == '正羽部客服组' ||
                userStore.roles[0] == '技术研发组'
              "
              type="primary"
              text
              bg
              size="small"
              @click="handleUpdate(scope.row)"
              >修改订单</el-button
            > -->
            <!-- <br />
            <el-button
              v-if="
                userStore.roles[0] == '超级管理员' ||
                userStore.roles[0] == '渠道部子账户管理员' ||
                userStore.roles[0] == '子账户超级管理员' ||
                userStore.roles[0] == '正羽部客服组' ||
                userStore.roles[0] == '技术研发组'
              "
              type="primary"
              text
              bg
              size="small"
              @click="handleUpdateZC(scope.row)"
              >再次提交</el-button
            > -->
            <br />
            <el-button type="primary" text bg size="small" @click="handleCK(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination" style="margin-top: 20px">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :page-size="paginationData.pageSize"
          :total="paginationData.total"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增、修改、再次 -->
    <el-dialog v-model="dialogVisible" @closed="resetForm" width="70%">
      <el-form ref="formRef" :model="formData" label-width="120px" label-position="left" :rules="rules">
        <el-form-item prop="orderId" label="订单外部ID">
          <el-input v-model="formData.orderId" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="orderWantWant" label="旺旺号">
          <el-input v-model="formData.orderWantWant" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>

        <el-form-item prop="orderNote" label="备注">
          <el-input v-model="formData.orderNote" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="var2" label="可安装区域">
          <!--    -->
          <el-cascader
            size="large"
            :disabled="ck === '再次'"
            placeholder="可输入地址快速查询"
            :props="props"
            :options="areaoptions"
            v-model="formData.var2"
            :filterable="true"
            @change="ChangewebIdList"
          />
        </el-form-item>
        <el-form-item prop="webId" label="宽带产品名称">
          <!-- :disabled="ids !== undefined"   @change="ChangewebIdListJE"-->
          <el-select
            :disabled="ck === '再次'"
            v-model="formData.webId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option
              v-for="item in webIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.state == '下架'"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="收取费用选项" prop="totalFeeZJ">
          <el-select
            v-model="formData.totalFeeZJ"
            :disabled="ck === '再次'"
            multiple
            @change="xuanzezongji"
            style="width: 240px"
          >
            <el-option v-for="item in webIdListZJ" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item prop="totalFee" label="总计">
          <el-input v-model="formData.totalFee" style="width: 240px" disabled />
        </el-form-item> -->

        <el-form-item prop="orderCardName" label="办理姓名">
          <el-input v-model="formData.orderCardName" placeholder="请输入" :disabled="ck === '再次'" />
        </el-form-item>
        <el-form-item prop="orderCardId" label="身份证号码">
          <el-input v-model="formData.orderCardId" placeholder="请输入" :disabled="ck === '再次'" />
        </el-form-item>
        <el-form-item prop="orderAddress">
          <template #label>
            <span>地址</span>
            <el-tooltip class="box-item" effect="customized" placement="bottom">
              <template #content>
                地址格式：某某省 某某市 某某区 详细地址<br />
                例如 河南省 焦作市 山阳区 新新家园某某楼503<br />
                格式不正确不予通过
              </template>
              <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
          <el-input
            v-model="formData.orderAddress"
            placeholder=" 地址格式：河南省 焦作市 山阳区 新新家园某某楼503"
            :disabled="ck === '再次'"
          />
        </el-form-item>
        <el-form-item prop="orderPhone" label="联系电话">
          <el-input v-model="formData.orderPhone" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="money" label="付款金额">
          <el-input v-model="formData.money" placeholder="请输入" :disabled="ids !== undefined" />
        </el-form-item>
        <el-form-item prop="isMentor" label="需要师傅代收款">
          <el-select v-model="formData.isMentor" clearable placeholder="请选择" :disabled="ids !== undefined">
            <el-option :key="1" label="是" value="是" />
            <el-option :key="2" label="否" value="否" />
          </el-select>
        </el-form-item>
        <!-- 多张图片上传 -->
        <!-- <el-form-item prop="photo" label="上传图片">
          <el-upload
            :multiple="true"
            v-model:file-list="fileList1"
            action="api/webOrder/image/upload"
            list-type="picture-card"
            :on-remove="handleRemove"
            :headers="headersOpts"
            accept="image/*"
            :on-change="handleChageImg1"
            :on-preview="handlePictureCardPreview"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible2">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item> -->

        <el-form-item v-if="ids !== undefined" prop="state" label="状态">
          <el-select v-model="formData.state" clearable placeholder="请选择" :disabled="ck == '查看' || ck === '再次'">
            <el-option :key="1" label="未提交" value="未提交" />
            <el-option :key="2" label="处理中" value="处理中" />
            <el-option :key="3" label="安装中" value="安装中" />
            <el-option :key="4" label="已完成" value="已完成" />
            <el-option :key="5" label="安装失败" value="安装失败" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="resultType" label="备注原因分类">
          <el-select
            v-model="formData.resultType"
            clearable
            filterable
            placeholder="请选择"
            :disabled="ck == '查看' || ck === '再次'"
          >
            <el-option :key="1" label="测试单" value="测试单" />
            <el-option :key="2" label="该地区无法安装" value="该地区无法安装" />
            <el-option :key="3" label="用户取消订单" value="用户取消订单" />
            <el-option :key="4" label="无法联系到用户" value="无法联系到用户" />
            <el-option :key="5" label="地址不详" value="地址不详" />
            <el-option :key="6" label="用户信息不正确" value="用户信息不正确" />
            <el-option :key="7" label="重复下单" value="重复下单" />
            <el-option :key="8" label="用户黑名单" value="用户黑名单" />
            <el-option :key="9" label="安装异常" value="安装异常" />
            <el-option :key="10" label="用户信息已存在订单" value="用户信息已存在订单" />
            <el-option :key="11" label="开户失败" value="开户失败" />
            <el-option :key="12" label="年龄超限" value="年龄超限" />
            <el-option :key="13" label="地址原因" value="地址原因" />
            <el-option :key="14" label="订单超时" value="订单超时" />
            <el-option :key="15" label="店铺原因失败" value="店铺原因失败" />
            <el-option :key="16" label="提供信息缺失" value="提供信息缺失" />
            <el-option :key="17" label="套餐已下架" value="套餐已下架" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="result" label="结果描述">
          <el-input v-model="formData.result" placeholder="请输入" :disabled="ck == '查看' || ck === '再次'" />
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="mentorPhone" label="安装师傅电话">
          <el-input v-model="formData.mentorPhone" placeholder="请输入" :disabled="ck == '查看' || ck === '再次'" />
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="mentorNote" label="安装情况备注">
          <el-input v-model="formData.mentorNote" placeholder="请输入" :disabled="ck == '查看' || ck === '再次'" />
        </el-form-item>
        <el-form-item v-if="ids !== undefined" prop="webNum" label="宽带账号">
          <el-input v-model="formData.webNum" placeholder="请输入" :disabled="ck == '查看' || ck === '再次'" />
        </el-form-item>
        <!-- <el-form-item
          v-if="
            userStore.roles[0] == '超级管理员' ||
            userStore.roles[0] == '渠道部子账户管理员' ||
            userStore.roles[0] == '子账户超级管理员' ||
            userStore.roles[0] == '技术研发组'
          "
          prop="commission"
          label="公司佣金"
        >
          <el-input autosize type="textarea" v-model="formData.commission" placeholder="请输入" disabled />
        </el-form-item> -->
        <!-- <el-form-item
          v-if="
            userStore.roles[0] == '超级管理员' ||
            userStore.roles[0] == '渠道部子账户管理员' ||
            userStore.roles[0] == '子账户超级管理员' ||
            userStore.roles[0] == '技术研发组'
          "
          prop="var3"
          label="店铺佣金"
        >
          <el-input v-model="formData.var3" placeholder="请输入" disabled />
        </el-form-item> -->
        <el-form-item v-if="ids !== undefined" prop="isJs" label="是否结算">
          <el-select v-model="formData.isJs" clearable placeholder="请选择" :disabled="ck == '查看' || ck === '再次'">
            <el-option :key="1" label="已结算" value="已结算" />
            <el-option :key="2" label="未结算" value="未结算" />
          </el-select>
        </el-form-item>
        <el-form-item prop="jsTime" label="结算时间">
          <!-- <el-input v-model="formData.jsTime" placeholder="请输入" :disabled="ids !== undefined" /> -->
          <el-date-picker
            style="width: 240px"
            v-model="formData.jsTime"
            disabled
            type="datetime"
            placeholder="请选择时间"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate">确认</el-button>
      </template>
    </el-dialog>

    <!-- 查看详情 -->
    <el-dialog v-model="dialogVisibleXQ" @closed="resetForm" width="70%">
      <el-form ref="formRef" :model="formData" label-width="120px" label-position="left" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card style="height: 100%">
              <el-form-item prop="orderId" label="订单外部ID">
                <el-input v-model="formData.orderId" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="orderWantWant" label="旺旺号">
                <el-input v-model="formData.orderWantWant" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>

              <el-form-item prop="orderNote" label="备注">
                <el-input v-model="formData.orderNote" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="var2" label="可安装区域">
                <el-cascader
                  :disabled="ids !== undefined"
                  size="large"
                  placeholder="可输入地址快速查询"
                  :props="props"
                  :options="areaoptions"
                  v-model="formData.var2"
                  :filterable="true"
                  @change="ChangewebIdList"
                />
              </el-form-item>
              <el-form-item v-if="ids == undefined" prop="webId" label="宽带产品名称">
                <el-select
                  v-model="formData.webId"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px"
                  :disabled="ids !== undefined"
                >
                  <el-option
                    v-for="item in webIdList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.state == '下架'"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-else prop="webId" label="宽带产品名称">
                <el-select
                  v-model="formData.webId"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px"
                  :disabled="ids !== undefined"
                >
                  <el-option
                    v-for="item in webIdListTWo"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.state == '下架'"
                  />
                </el-select>
              </el-form-item>
              <!-- <el-form-item prop="photo" label="上传图片">
                <el-image
                  v-for="(item, index) in formData.imageList"
                  :key="index"
                  :preview-src-list="formData.imageList"
                  :initial-index="index"
                  style="width: 100px; height: 100px"
                  :src="item"
                  :zoom-rate="1.2"
                  fit="cover"
                />
              </el-form-item> -->
            </el-card></el-col
          >

          <el-col :span="8">
            <el-card style="height: 100%">
              <el-form-item v-if="ck !== '修改' && ck !== '再次'" prop="orderCardName" label="办理姓名">
                <el-input v-model="formData.orderCardName" placeholder="请输入" :disabled="ids !== undefined" />
                <div v-if="ids !== undefined">
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content> 为保证用户个人信息安全，该字段进行加密处理，如需解密，请点击 </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                  <el-link @click="handleDecrypt('orderCardName')">办理姓名解密</el-link>
                </div>
              </el-form-item>
              <el-form-item v-if="ck !== '修改' && ck !== '再次'" prop="orderCardId" label="身份证号码">
                <el-input v-model="formData.orderCardId" placeholder="请输入" :disabled="ids !== undefined" />
                <div v-if="ids !== undefined">
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content> 为保证用户个人信息安全，该字段进行加密处理，如需解密，请点击 </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                  <el-link @click="handleDecrypt('orderCardId')">身份证姓名解密</el-link>
                </div>
              </el-form-item>
              <el-form-item v-if="ck !== '修改' && ck !== '再次'" prop="orderAddress">
                <template #label>
                  <span>地址</span>
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content>
                      地址格式：某某省 某某市 某某区 详细地址<br />
                      例如 河南省 焦作市 山阳区 新新家园某某楼503<br />
                      格式不正确不予通过
                    </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                </template>
                <el-input
                  v-model="formData.orderAddress"
                  :disabled="ids !== undefined"
                  placeholder=" 地址格式：河南省 焦作市 山阳区 新新家园某某楼503"
                />
                <div v-if="ids !== undefined">
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content> 为保证用户个人信息安全，该字段进行加密处理，如需解密，请点击 </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                  <el-link @click="handleDecrypt('orderAddress')">地址解密</el-link>
                </div>
              </el-form-item>
              <el-form-item prop="orderPhone" label="联系电话">
                <el-input v-model="formData.orderPhone" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="money" label="付款金额">
                <el-input v-model="formData.money" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="isMentor" label="需要师傅代收款">
                <el-select v-model="formData.isMentor" clearable placeholder="请选择" :disabled="ids !== undefined">
                  <el-option :key="1" label="是" value="是" />
                  <el-option :key="2" label="否" value="否" />
                </el-select>
              </el-form-item> </el-card
          ></el-col>
          <el-col :span="8">
            <el-card style="height: 100%">
              <el-form-item v-if="ids !== undefined" prop="state" label="状态">
                <el-select v-model="formData.state" clearable placeholder="请选择" :disabled="ck == '查看'">
                  <el-option :key="1" label="未提交" value="未提交" />
                  <el-option :key="2" label="处理中" value="处理中" />
                  <el-option :key="3" label="安装中" value="安装中" />
                  <el-option :key="4" label="已完成" value="已完成" />
                  <el-option :key="5" label="安装失败" value="安装失败" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="ids !== undefined" prop="resultType" label="备注原因分类">
                <el-input v-model="formData.resultType" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item v-if="ids !== undefined" prop="result" label="结果描述">
                <el-input v-model="formData.result" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item v-if="ids !== undefined" prop="mentorPhone" label="安装师傅电话">
                <el-input v-model="formData.mentorPhone" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item v-if="ids !== undefined" prop="mentorNote" label="安装情况备注">
                <el-input v-model="formData.mentorNote" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <el-form-item v-if="ids !== undefined" prop="webNum" label="宽带账号">
                <el-input v-model="formData.webNum" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item>
              <!-- <el-form-item
                v-if="
                  userStore.roles[0] == '超级管理员' ||
                  userStore.roles[0] == '渠道部子账户管理员' ||
                  userStore.roles[0] == '子账户超级管理员' ||
                  userStore.roles[0] == '技术研发组'
                "
                prop="commission"
                label="公司佣金"
              >
                <el-input
                  autosize
                  type="textarea"
                  v-model="formData.commission"
                  placeholder="请输入"
                  :disabled="ck == '查看'"
                />
              </el-form-item> -->
              <!-- <el-form-item
                v-if="
                  userStore.roles[0] == '超级管理员' ||
                  userStore.roles[0] == '渠道部子账户管理员' ||
                  userStore.roles[0] == '子账户超级管理员' ||
                  userStore.roles[0] == '技术研发组'
                "
                prop="var3"
                label="店铺佣金"
              >
                <el-input v-model="formData.var3" placeholder="请输入" :disabled="ck == '查看'" />
              </el-form-item> -->
              <el-form-item v-if="ids !== undefined" prop="isJs" label="是否结算">
                <el-select v-model="formData.isJs" clearable placeholder="请选择" :disabled="ck == '查看'">
                  <el-option :key="1" label="已结算" value="已结算" />
                  <el-option :key="2" label="未结算" value="未结算" />
                </el-select>
              </el-form-item>
              <el-form-item prop="jsTime" label="结算时间">
                <el-input v-model="formData.jsTime" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>

              <!-- <el-form-item prop="yearFee" label="包年费">
                <el-input v-model="formData.yearFee" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="testFee" label="宽带调测费">
                <el-input v-model="formData.testFee" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="tvFee" label="TV(月费及调测费)">
                <el-input v-model="formData.tvFee" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item>
              <el-form-item prop="totalFee" label="总金额">
                <el-input v-model="formData.totalFee" placeholder="请输入" :disabled="ids !== undefined" />
              </el-form-item> -->
            </el-card></el-col
          >
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisibleXQ = false">取消</el-button>
        <el-button type="primary" @click="dialogVisibleXQ = false">确认</el-button>
      </template>
    </el-dialog>
    <!-- 批量修改信息反馈 -->
    <!-- <el-dialog v-model="updateSuccInfo" title="修改数据统计" width="50%">
      <div class="pbox">
        <p>1.修改时间：{{ updateInfo.time }}</p>
        <p>2.修改成功：{{ updateInfo.data.success }}</p>
        <p>3.修改失败：{{ updateInfo.data.fail }}</p>
        <p>4.修改用时：{{ updateInfo.data.time }}毫秒</p>
      </div>

      <template #footer>
        <el-button @click="updateSuccInfo = false">取消</el-button>
      </template>
    </el-dialog> -->
  </div>
</template>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
.container {
  overflow: hidden; /* 控制内容溢出时如何处理 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 使用省略号表示被裁切的文本 */
}
.Xjstate {
  color: #afadad;
  /* background: #e7e7e7; */
}
.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}
</style>
